<template>
    <nav>
        <div id="sidebar">
           <div class="panel">
                <div class="header" v-if="userInfo">
                    个人信息
                </div>
                <div class="inner">
                    <router-link v-if="!userInfo" :to="'/login'">立即去登录吧</router-link>
                    <div v-if="userInfo" class="user_card">
                        <router-link :to="'/user/' + userInfo.name" class="user_avatar"><img :src="userInfo.avatar ? userInfo.avatar : require('@/assets/images/avatar.jpg')" alt=""></router-link>
                        <router-link class="user_name" :to="'/user/' + userInfo.name" ref="userInfo._id">{{userInfo.name}}</router-link>
                        <div class="fontC2 mt2">积分：{{userInfo.score}}</div>
                        <p class="fontC3">{{userInfo.signature ? userInfo.signature : '我就是我，不需要签名'}}</p>
                    </div>
                </div>
                <!-- <div class="inner" v-if="!curTag">
                    <div class="user_card">
                        <router-link :to="'/user/' + currUserInfo.name" class="user_avatar"><img :src="currUserInfo.avatar ? currUserInfo.avatar : require('@/assets/images/avatar.jpg')" alt=""></router-link>
                        <router-link class="user_name" :to="'/user/' + currUserInfo.name" ref="userInfo._id">{{currUserInfo.name}}</router-link>
                        <div class="fontC3">积分：{{currUserInfo.score}}</div>
                    </div>
                </div> -->
           </div>
           <div class="panel" v-if="this.userInfo">
                <div class="inner">
                    <router-link :to="'/topic/create'" class="create_topic">发布话题</router-link>
               </div>
           </div>
        </div>
    </nav>
</template>
<script>
    import {mapState, mapActions} from 'vuex'
    import { signout, getUserByName } from "@/service/api"
    import { getStore } from "@/config/mUtils"

    export default {
        data() {
            return {
                avatar: '',
                curr_user_name: '',
                // currUserInfo: {
                //     name: '',
                //     score: '',
                // },
                // curTag: true, //默认为登录用户的信息
            }
        },
        mounted(){
            // this.curr_user_name = this.userInfo.name
            // this.getUser();
            // if('name' in this.$route.params) {
            //     this.curr_user_name = this.$route.params.name
            //     this.getUser();
            //     this.curTag = false
            // }
            // console.log(this.userInfo.name)
        },
        computed: {
            ...mapState([
                'userInfo'
            ]),
        },
        methods: {
            ...mapActions([
                'getUserInfo'
            ]),
            // async getUser() {//获取用户的信息
            //     console.log(this.userInfo.loginName)
            //     let params = {
            //         loginName: this.curr_user_name
            //     }
            //     let res = await getUserByName(params)
            //     if(res.code) {
            //         this.currUserInfo = res.result
            //     } else {
            //         // console.log(res)
            //         this.$message.error(res.msg)
            //     }
            // }
        },
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';
    
    #sidebar {
        width: 290px;
        font-size: 14px;
        float: right;
        // margin-bottom: 20px;
        a {
            color: $main;
            &:hover {
                color: $hover;
            }
        }
        .user_card {
            line-height: 26px;
            font-size: 13px;
            .user_avatar {
                visibility: middle;
                margin-right: 0.5rem;
                img {
                    border-radius: 3px;
                    height: 48px;
                    width: 48px;
                }
            }
            .user_name {
                font-size: 16px;
                max-width: 120px;
                white-space: nowrap;
                display: inline-block;
                vertical-align: middle;
                line-height: 40px;
            }
        }
        .create_topic {
            background-color: $main;
            color: $fff;
            text-align: center;
            width: 80px;
            display: block;
            @include lh(30px);
            border-radius: 3px;
            &:hover {
                opacity: 0.8;
                color: #fff;
            }
        }
    }
</style>

